<!DOCTYPE html>
<html lang="zxx" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head>
    <title>Womens</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="utf-8"/>
    <meta name="keywords" content=""/>
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>
    <!-- Custom Theme files -->
    <link th:href="@{/css/bootstrap.css}" type="text/css" rel="stylesheet" media="all">
    <!-- shop css -->
    <link th:href="@{/css/shop.css}" type="text/css" rel="stylesheet" media="all">
    <!-- Owl-Carousel-CSS -->
    <!--<link rel="stylesheet" th:href="@{/css/owl.carousel.css}" type="text/css" media="all">-->
    <!-- flexslider-css -->
    <link rel="stylesheet" th:href="@{/css/flexslider.css}" type="text/css" media="screen"/>

    <link th:href="@{/css/style.css}" type="text/css" rel="stylesheet" media="all">
    <!-- font-awesome icons -->
    <link th:href="@{/css/fontawesome-all.min.css}" rel="stylesheet">
    <!-- //Custom Theme files -->
    <!-- online-fonts -->
    <link href="http://fonts.googleapis.com/css?family=Elsie+Swash+Caps:400,900" rel="stylesheet">
    <link href="http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,200i,300,300i,400,400i,600,600i,700,700i,900,900i"
          rel="stylesheet">
    <!-- //online-fonts -->
</head>
<body>
<header>
    <div class="container">
        <!-- top nav -->
        <nav class="top_nav d-flex pt-3 pb-1">
            <!-- logo -->
            <h1>
                <a class="navbar-brand" href="index.html">fh
                </a>
            </h1>
            <!-- //logo -->
            <div class="w3ls_right_nav ml-auto d-flex">
                <!-- search form -->
                <form class="nav-search form-inline my-0 form-control" action="#" method="post">
                    <input type="text">
                    <input class="btn btn-outline-secondary  ml-3 my-sm-0" type="submit" value="Search">
                </form>
                <!-- search form -->
                <div class="nav-icon d-flex">
                    <!-- sigin and sign up -->
                    <!-- sigin and sign up -->
                    <!-- shopping cart -->
                    <div class="cart-mainf">
                        <div class="hubcart hubcart2 cart cart box_1">
                            <form action="#" method="post">
                                <input type="hidden" name="cmd" value="_cart">
                                <input type="hidden" name="display" value="1">
                                <button class="btn top_hub_cart mt-1" type="submit" name="submit" value="" title="Cart">
                                    <i class="fas fa-shopping-bag"></i>
                                </button>
                            </form>
                        </div>
                    </div>
                    <!-- //shopping cart ends here -->
                </div>
            </div>
        </nav>
        <!-- //top nav -->
        <!-- bottom nav -->
        <nav class="navbar navbar-expand-lg navbar-light justify-content-center">
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                    aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

        </nav>
        <!-- //bottom nav -->
    </div>
    <!-- //header container -->
</header>
<!-- //header -->
<!-- inner banner -->
<div class="ibanner_w3 pt-sm-5 pt-3">
    <h4 class="head_agileinfo text-center text-capitalize text-center pt-5">
        <span>f</span>ashion
        <span>h</span>ub</h4>
</div>
<!-- //inner banner -->
<!-- breadcrumbs -->
<!-- //breadcrumbs -->


<!-- Single -->
<div class="innerf-pages section py-5">
    <div class="container">
        <div class="row my-sm-5">
            <div class="col-lg-4 single-right-left">
                <div class="grid images_3_of_2">
                    <div class="flexslider1">
                        <ul class="slides">
                            <li th:data-thumb="${productDetail.get('product_image')}">
                                <div class="thumb-image">
                                    <img th:src="${productDetail.get('product_image')}" data-imagezoom="true" alt=" "
                                         class="img-fluid"></div>
                            </li>
                            <li th:data-thumb="${productDetail.get('product_image')}">
                                <div class="thumb-image">
                                    <img th:src="${productDetail.get('product_image')}" data-imagezoom="true" alt=" "
                                         class="img-fluid"></div>
                            </li>
                            <li th:data-thumb="${productDetail.get('product_image')}">
                                <div class="thumb-image">
                                    <img th:src="${productDetail.get('product_image')}" data-imagezoom="true" alt=" "
                                         class="img-fluid"></div>
                            </li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
            <div class="col-lg-8 mt-lg-0 mt-5 single-right-left simpleCart_shelfItem">
                <h3 th:text="${productDetail.get('product_name')}"></h3>
                <div class="caption">

                    <ul class="rating-single">
                        <li>
                            <a href="#">
                                <span class="fa fa-star yellow-star" aria-hidden="true"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-star yellow-star" aria-hidden="true"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-star yellow-star" aria-hidden="true"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-star yellow-star" aria-hidden="true"></span>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <span class="fa fa-star yellow-star" aria-hidden="true"></span>
                            </a>
                        </li>
                    </ul>
                    <div class="clearfix"></div>
                    <h6 th:text="${productDetail.get('product_price')}"></h6>
                </div>
                <div class="desc_single">
                    <h5>Description</h5>
                    <p th:text="${productDetail.get('product_description')}"></p>
                    <input id="productId" th:value="${productDetail.get('product_id')}" style="display: none">
                </div>
                <div class="d-sm-flex justify-content-between">
                    <div class="occasional">
                        <h5 class="sp_title mb-3">Highlights</h5>
                        <ul class="single_specific">
                            <li>
                                <span>Round Neck </span> 3/4th Sleeve
                            </li>
                            <li> Fabric:
                                <span>Polyester</span>
                            <li> Pattern
                                <span>Floral Print </span>
                            </li>

                        </ul>

                    </div>
                    <div class="color-quality mt-sm-0 mt-4">
                        <h5 class="sp_title mb-3">services</h5>
                        <ul class="single_serv">
                            <li>
                                <a href="#">30 Day Return Policy</a>
                            </li>
                            <li class="mt-2">
                                <a href="#">Cash on Delivery available</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="occasion-cart">
                    <div class="chr single-item single_page_b">
                        <button id="spikeBut" onclick="spikeBut()" type="submit" class="hub-cart phub-cart btn">
                            <i class="fa fa-cart-plus" aria-hidden="true"></i>
                        </button>
                        <canvas id="canvas"></canvas>
                        <input id="yanz">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /new_arrivals -->

<!--// Single -->

<script th:src="@{/js/jquery-2.2.3.min.js}"></script>

<script>
    $(document).ready(function () {
        $('ul li.dropdown').hover(function () {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(200);
        }, function () {
            $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(200);
        });
    });
</script>
<!-- //smooth dropdown -->


<!-- FlexSlider -->
<script th:src="@{/js/jquery.flexslider.js}"></script>
<script>
    // Can also be used with $(document).ready()
    $(window).load(function () {
        $('.flexslider1').flexslider({
            animation: "slide",
            controlNav: "thumbnails"
        });
    });
</script>
<!-- //FlexSlider-->
<!-- Responsiveslides -->
<script th:src="@{/js/responsiveslides.min.js}"></script>
<script>
    // You can also use "$(window).load(function() {"
    $(function () {
        // Slideshow 4
        $("#slider3").responsiveSlides({
            auto: false,
            pager: true,
            nav: false,
            speed: 500,
            namespace: "callbacks",
            before: function () {
                $('.events').append("<li>before event fired.</li>");
            },
            after: function () {
                $('.events').append("<li>after event fired.</li>");
            }
        });

    });
</script>
<!-- // Responsiveslides -->
<!-- cart-js -->
<script th:src="@{/js/minicart.js}"></script>
<script>
    hub.render();

    hub.cart.on('new_checkout', function (evt) {
        var items, len, i;

        if (this.subtotal() > 0) {
            items = this.items();

            for (i = 0, len = items.length; i < len; i++) {
            }
        }
    });
</script>
<!-- //cart-js -->
<!-- zoom -->
<script th:src="@{/js/imagezoom.js}"></script>
<!-- zoom-->

<!-- start-smooth-scrolling -->
<script th:src="@{/js/move-top.js}"></script>
<script th:src="@{/js/easing.js}"></script>
<script>
    jQuery(document).ready(function ($) {
        $(".scroll").click(function (event) {
            event.preventDefault();

            $('html,body').animate({
                scrollTop: $(this.hash).offset().top
            }, 1000);
        });
    });
</script>
<!-- //end-smooth-scrolling -->
<!-- smooth-scrolling-of-move-up -->
<script>
    $(document).ready(function () {

        $().UItoTop({
            easingType: 'easeOutQuart'
        });

    });
</script>
<!--<script th:src="@{/js/SmoothScroll.min.js}"></script>-->
<!-- //smooth-scrolling-of-move-up -->
<!-- Bootstrap core JavaScript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script th:src="@{/js/bootstrap.js}"></script>

<script>

    var string = null

    $(function(){
        //countDown();
        $.ajax({
            url: "/product/getVC/1/"+$("#productId").val(),
            type: "GET",
            success: function (data2) {
                console.log(data2);
                string = data2;
                var data = canvasWrapText({canvas:document.getElementById("canvas"),text:string});
            },
            error: function () {
                console.log("客户端请求有误");
            }
        });
    });

    function spikeBut() {

        $.ajax({
            url: "/product/getUrl/1/"+$("#productId").val()+"/"+$("#yanz").val(),
            type: "GET",
            success: function (data) {
                console.log(data);
                //window.location.href="/order_detail.htm?orderId="+data.data.id;
                $.ajax({
                    url: "/product/product_order/"+JSON.parse(data)+"/1/"+$("#productId").val(),
                    type: "GET",
                    success: function (data1) {
                        console.log(data1);
                    },
                    error: function () {
                        console.log("客户端请求有误");
                    }
                });
            },
            error: function () {
                console.log("客户端请求有误");
            }
        });

    }


    //绘制文字到canvas，判断换行位置，和设置canvas高度
    function canvasWrapText(options) {
        var settings = {
            canvas:document.getElementsByTagName("canvas")[0], //canvas对象，必填，不填写默认找到页面中的第一个canvas
            canvasWidth:120, //canvas的宽度
            drawStartX:10, //绘制字符串起始x坐标
            drawStartY:30, //绘制字符串起始y坐标
            lineHeight:0, //文字的行高
            font:"24px 'Microsoft Yahei'", //文字样式
            text:"请修改掉默认的配置", //需要绘制的文本
            drawWidth:460, //文字显示的宽度
            color:"#000000", //文字的颜色
            backgroundColor:"#ffffff", //背景颜色
        };

        //将传入的配置覆盖掉默认配置
        if(!!options && typeof options === "object"){
            for(var i in options){
                settings[i] = options[i];
            }
        }

        //获取2d的上线文开始设置相关属性
        var canvas = settings.canvas;
        canvas.width = settings.canvasWidth;
        var ctx = canvas.getContext("2d");

        //绘制背景色
        ctx.fillStyle = settings.backgroundColor;
        ctx.fillRect(0,0,canvas.width,canvas.height);

        //绘制文字
        ctx.font = settings.font;
        ctx.fillStyle = settings.color;
        var lineWidth = 0; //当前行的绘制的宽度
        var lastTextIndex = 0; //已经绘制上canvas最后的一个字符的下标
        //由于改变canvas 的高度会导致绘制的纹理被清空，所以，不预先绘制，先放入到一个数组当中
        var arr = [];
        for(var i = 0; i<settings.text.length; i++){
            //获取当前的截取的字符串的宽度
            lineWidth = ctx.measureText(settings.text.substr(lastTextIndex,i-lastTextIndex)).width;

            if(lineWidth > settings.drawWidth){
                //判断最后一位是否是标点符号
                if(judgePunctuationMarks(settings.text[i-1])){
                    arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex));
                    lastTextIndex = i;
                }else{
                    arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex-1));
                    lastTextIndex = i-1;
                }
            }
            //将最后多余的一部分添加到数组
            if(i === settings.text.length - 1){
                arr.push(settings.text.substr(lastTextIndex,i-lastTextIndex+1));
            }
        }

        //根据arr的长度设置canvas的高度
        canvas.height = arr.length*settings.lineHeight+settings.drawStartY;

        ctx.font = settings.font;
        ctx.fillStyle = settings.color;
        for(var i =0; i<arr.length; i++){
            ctx.fillText(arr[i],settings.drawStartX,settings.drawStartY+i*settings.lineHeight);
        }

        //判断是否是需要避开的标签符号
        function judgePunctuationMarks(value) {
            var arr = [".",",",";","?","!",":","\"","，","。","？","！","；","：","、"];
            for(var i = 0; i< arr.length; i++){
                if(value === arr[i]){
                    return true;
                }
            }
            return false;
        }

        return canvas.toDataURL();
    }

    //调用函数获取到img的data数据



</script>

</body>

</html>